import React from 'react';
import { connect, routerRedux } from 'dva';
import moment from 'moment';
import { Row, Col, Spin } from 'antd';
import toDoImg from '../../../../../assets/busi/OperatePlatform/todo_bg.png';
import DoneImg from '../../../../../assets/busi/OperatePlatform/done_bg.png';
import styles from './index.less';
class TodoList extends React.Component {
  constructor() {
    super();
    this.state = {
      hasDoneNum: 0, //已办数量
    };
  }
  componentDidMount() {
    const { dispatch } = this.props;
    //获取已办数量
    dispatch({
      type: 'dashboard/getFlowDidList',
      payload: {
        page: 1,
        pageSize: 10,
        startTime: moment().format('YYYY-MM-DD'),
        endTime: moment().format('YYYY-MM-DD'),
      },
      callback: (res) => {
        if (res && res.pageInfo) {
          this.setState({
            hasDoneNum: res?.pageInfo?.total || 0,
          });
        } else {
          this.setState({
            hasDoneNum: '--',
          });
        }
      },
    });
  }
  //待办列表
  onTaskInfoList = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push(`/taskInfoList`));
  };
  //已办列表
  onProcessList = () => {
    const { dispatch } = this.props;
    let params = {
      startTime: moment().format('YYYY-MM-DD'),
      endTime: moment().format('YYYY-MM-DD'),
    };
    sessionStorage.setItem('DoneTaskTime', JSON.stringify(params));
    dispatch(routerRedux.push(`/OperatePlatform/taskDidList`));
  };
  render() {
    const {
      Todoloading,
      doneLoading,
      dashboard: { toDoTableData },
    } = this.props;
    return (
      <div className={styles.toWrap}>
        <Row type='flex' justify='space-between'>
          <Col span={12} className={styles.TodoNow} onClick={this.onTaskInfoList}>
            <div className={styles.TodoWrap}>
              <div className={styles.TodoWrapHeader}></div>
              <div className={styles.TodoNums}>
                <span>待办</span>
                <span title={toDoTableData?.pageInfo?.total ? toDoTableData?.pageInfo?.total : toDoTableData?.pageInfo?.total == 0 ? 0 : '--'}>
                  {Todoloading ? <Spin></Spin> : toDoTableData?.pageInfo?.total ? toDoTableData?.pageInfo?.total : toDoTableData?.pageInfo?.total == 0 ? 0 : '--'}
                </span>
              </div>
              <div className={styles.todoImg}>
                <img src={toDoImg} alt='待办' />
              </div>
            </div>
          </Col>
          <Col span={11} className={styles.doneNow} onClick={this.onProcessList}>
            <div className={styles.doneWrap}>
              <div className={styles.DoneWrapHeader}></div>
              <div className={styles.DoneNums}>
                <span>已办</span>
                <span title={this.state.hasDoneNum}>{doneLoading ? <Spin></Spin> : this.state.hasDoneNum}</span>
              </div>
              <div className={styles.DoneImg}>
                <img src={DoneImg} alt='已办' />
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
export default connect(({ dashboard, OperatePlatformM, loading }) => ({
  dashboard,
  OperatePlatformM,
  Todoloading: loading.effects['dashboard/getFlowToDoList'],
  doneLoading: loading.effects['dashboard/getFlowDidList'],
}))(TodoList);
